<template>
  <view class="play-container">
    <view class="category-nav">
      <view v-for="(category, index) in categories" :key="index" class="category-item" @click="selectCategory(category)">
        <image :src="category.icon" class="category-icon"></image>
        <text :class="{'active': currentCategory === category.name}">{{ category.name }}</text>
      </view>
    </view>
    <view class="activity-list">
      <view v-for="(activity, index) in currentActivities" :key="index" class="activity-item" @click="navigateToActivity(activity)">
        <view class="activity-image">
          <image :src="activity.image" mode="aspectFill"></image>
        </view>
        <view class="activity-info">
          <text class="activity-title">{{ activity.title }}</text>
          <text class="activity-description">{{ activity.description }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      categories: [
        { name: 'DIY手工坊', icon: '/static/icon/hand.png', activities: [
          { title: '陶艺制作', description: '亲手制作陶艺品', image: '/static/images/hand2.webp',path:'/pages/playDetails/playDetails'},
          { title: '木工手作', description: '制作个性化木制品', image: '/static/images/hand1.jpg' ,path:'/pages/playDetails/playDetails'}
        ] },
        { name: '酒吧', icon: '/static/icon/jiubar.png', activities: [
          { title: '鸡尾酒体验', description: '品尝特色鸡尾酒', image: '/static/images/jiuba1.jpg', path: '/pages/playDetails/playDetails' },
          { title: '啤酒品鉴', description: '品鉴各国啤酒', image: '/static/images/jiuba2.jpg', path: '/pages/playDetails/playDetails' }
        ] },
        { name: '台球厅', icon: '/static/icon/table.png', activities: [
          { title: '台球比赛', description: '参与台球竞技', image: '/static/images/taiqiu1.jpg', path: '/pages/playDetails/playDetails' },
          { title: '台球训练', description: '提高台球技巧', image: '/static/images/taiqiu2.jpg', path: '/pages/playDetails/playDetails' }
        ] },
        { name: 'KTV', icon: '/static/icon/KTV.png', activities: [
          { title: '主题K歌', description: '享受主题K歌房', image: '/static/images/ktv1.jpg', path: '/pages/playDetails/playDetails' },
          { title: '私人定制K歌', description: '定制私人K歌体验', image: '/static/images/ktv2.jpg', path: '/pages/playDetails/playDetails' }
        ] },
        { name: '棋牌室', icon: '/static/icon/qipaishi.png', activities: [
          { title: '麻将竞技', description: '参与麻将比赛', image: '/static/images/majiang.webp', path: '/pages/playDetails/playDetails' },
          { title: '扑克牌游戏', description: '玩转各种扑克游戏', image: '/static/images/pukepai.webp', path: '/pages/playDetails/playDetails' }
        ] },
        { name: '网吧', icon: '/static/icon/wangbar.png', activities: [
          { title: '电子竞技', description: '体验专业电竞设备', image: '/static/images/dianzijingji.webp', path: '/pages/playDetails/playDetails' },
          { title: '休闲上网', description: '享受舒适的上网环境', image: '/static/images/xiuxian.webp', path: '/pages/playDetails/playDetails' }
        ] }
      ],
      currentCategory: 'DIY手工坊',
      currentActivities: []
    };
  },
  methods: {
    selectCategory(category) {
      this.currentCategory = category.name;
      this.currentActivities = category.activities;
    },
    navigateToActivity(activity) {
      uni.navigateTo({
        url: activity.path
      });
    }
  },
  mounted() {
    this.currentActivities = this.categories[0].activities;
  }
};

</script>

<style>
.play-container {
  padding: 15px;
  background-color: #f8f8f8;
}
.category-nav {
  display: flex;
  justify-content: space-around;
  font-size: 8px;
  margin-bottom: 10px;
  
}
.category-item {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 10px;
  cursor: pointer;
}
.category-icon {
  width: 30px;
  height: 30px;
  margin-right: 1px;
}
.category-item text.active {
  color: #007aff;
  border-bottom: 2px solid #007aff;
}
.activity-list {
  display: flex;
  flex-wrap: wrap;
  /* justify-content: space-between; */
}
.activity-item {
  width: 88%;
  margin-bottom: 20px;
  margin-left: 20px;
  background-color: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}
.activity-image {
  width: 100%;
  height: 70%;
}
.activity-info {
  padding: 15px;
  margin-top: 10px;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.activity-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}
.activity-description {
	margin-top: 3px;
  font-size: 14px;
  color: #666;
}
</style>